<template>
  <div id="emailID" ref="emailRef">
    <div class="title">
      <span class="line"></span>
      <span>{{$t('wechat.email')}}</span>
    <!-- <el-button style="float:right;margin-left:10px;margin-right:10px;margin-top:6px;color:#fff;" type="text" @click="printPdf"><i class="el-icon-printer"></i> {{$t('wechat.dayinSms')}}</el-button> -->
    </div>
    <div class="mainContentBox">

    <div class="emailList">
      <div class="emailListItem" @click="handleEdit(item)" v-for="(item,index) in tableData" :key="index">
        <div>
          <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 39H44V24V9H24H4V24V39Z" fill="none" stroke="#3488eb" stroke-width="3" stroke-linejoin="round"/><path d="M4 9L24 24L44 9" stroke="#3488eb" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path d="M24 9H4V24" stroke="#3488eb" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path d="M44 24V9H24" stroke="#3488eb" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>
        </div>
        <div style="width:65%;">
          <div style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;" :title="item.subject">标题：{{item.subject}}</div>
          <div>{{$t('wechat.email')}}:{{item.account}}</div>
          <div>发送时间：{{formateDate(item.sendtime)}}</div>
        </div>
        <div>
          <div class="badgeBox" v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
            <el-button type="text" class="orderBtn" :title="$t('wechat.biaojitishi')" v-else @click.stop="markOrder(item)"  size="mini" style="margin-right:20px;float:right;color: #000;" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
        </div>
      </div>
    </div>

      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="offset"
          :page-size="limit"
          layout="total, prev, pager,  next, jumper"
          :total="total" 
          hide-on-single-page
         :pager-count="5"  
        >
        </el-pagination>
      </div>
    </div>
     <a-modal
      v-model="modal2Visible"
      :maskClosable="false"
      :getContainer="getRefsAff"
      :title="detailsData.subject"
      :dialog-style="{ top: '20px' }"
      width="100%"
      @ok="() => (modal2Visible = false)"
      :body-style="bodyStyle"
    >
      <div class="emailBox">
        <div class="headerBox">
          <p>From：<i class="el-icon-message"></i> {{detailsData.senderlist}} <span style="margin-left:20px;">{{formateDate(detailsData.sendtime)}}</span> </p>
          <p>To：<i class="el-icon-message"></i> {{detailsData.account}}<span style="margin-left:20px;">{{formateDate(detailsData.recvtime)}}</span></p>
        </div>
        <div>
          {{detailsData.preview}}
        </div>
        <p>{{detailsData.replaylist}}</p>
        <div class="mainContent">
          <div v-if="detailsData.htmlmsg" v-html="detailsData.htmlmsg">
          </div>
          <div v-else v-html="detailsData.textmsg">
          </div>
        </div>
      </div>
    </a-modal>

    <a-modal width="300px" v-model="showRemark" :getContainer="getRefsAff"
      :maskClosable="false" title="提示" @ok="handleOk">
      <p>{{$t('wechat.biaojibeizhu')}}</p>
      <p><el-input type="textarea" v-model="remark"></el-input></p>
    </a-modal>
  </div>
</template>

<script>
import print from 'print-js'
import html2canvas from "html2canvas"
import { getEmailInfo } from '@/api/email/email_api'
import { parseTime } from '@/utils/index'
import { sendMarkOrderApi } from '@/api/markApi/index'

export default {
  name: "email1",
  props:['sendData'],
  data() {
    return {
      bodyStyle:{
        height:'60vh',
        overflow:'auto',
      },
      showRemark:false,
      remark:'',
      id:'',
      tableData: [
      ],
      headerTitle:[],
      modal2Visible:false,
      offset:1,
      limit:20,
      total:0,
      detailsData:''
    };
  },
  watch:{
    '$store.state.account.email1':function(){
      if(this.sendData.list_offset){
        this.offset=this.sendData.list_offset;
        this.limit=this.sendData.list_limit;
      }else{
        this.offset=1;
      }
      this.init()
    }
  },
  created(){
    if(this.sendData.list_offset){
      this.offset=this.sendData.list_offset;
      this.limit=this.sendData.list_limit;
    }else{
      this.offset=1;
    }
    this.init();
  },
  methods:{
    handleOk(){
        let data={
        navigation_list:sessionStorage.getItem('arr').split(','),
        model:this.sendData.model,
        isChat:0,
        account_id:this.sendData.account_id,
        app_name:'',
        proof_num:this.sendData.proof_num,
        list_offset:this.offset,
        list_limit:this.limit,
        remark:this.remark,
        class:this.sendData.class,
        label:this.sendData.label,
        id:Number(this.id)
      }
      sendMarkOrderApi(data).then(res=>{
        this.showRemark=false;
        this.$message({
          message: '标记数据成功！',
          type: 'success'
        });
        this.tableData = [];
        this.onSearch();
      })
    },
    // 添加标记点
    markOrder(item){
      this.id=item.id;
      this.showRemark=true;
    },
    handleSizeChange(val) {
      this.limit=val
      this.init()
    },
    handleCurrentChange(val) {
      this.offset=val
      this.init()
    },
    getRefsAff(){
      return this.$refs.emailRef
    },
    onSearch(){
      this.init()
    },
    handleEdit(row){
      this.detailsData=row
      this.modal2Visible=true
    },
    formateDate(date){
      return parseTime(date)
    },
    init(){
      let data={
        proof_num:this.sendData.proof_num,
        account_id:Number(this.sendData.account_id),
        model:this.sendData.model,
        offset:this.offset,
        limit:this.limit
      }
      getEmailInfo(data).then(res=>{
        this.tableData=res.data;
        this.total=res.data[0].cnt;
      })
    },
    //打印
    printPdf(){
        html2canvas(document.getElementById('emailID')).then(function(canvas) {
          var imgageData = canvas.toDataURL("image/png");//把canvas转为base64图片
          print(imgageData, 'image');
        });
    },
    handleClick(){
      
    }
  }
};
</script>

<style scoped>
.emailListItem{
  height: 80px;
  /* border: 1px solid red; */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  cursor: pointer;  
  border-bottom:1px solid rgb(201, 201, 201);
}
.emailListItem:hover{
  background: #e4e4e4;
}
.emailList {
  /* height: 780px; */
  height: 98%;
  overflow-y: auto;
  /* border: 1px solid red; */
}

@media screen and (min-width: 2360px) {
  .emailList {
    height: 97%;

  }
}

@media screen and (min-width: 2561px) {
  .emailList {
    height: 93%;

  }
}
.emailList::-webkit-scrollbar {
width: 10px;
}
/* <!--修改 滚动条的 下面 的 样式--> */
.emailList::-webkit-scrollbar-track {
background-color: rgb(252, 252, 252);
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
}
/* <!--修改 滑块 --> */
.emailList::-webkit-scrollbar-thumb {
background-color: #c0c0c0;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
}
.badgeBox{
  width: 50px;
  height: 23px;
  border-radius: 10px;
  color: #fff;
  background: #f56c6c;
  text-align: center;
  line-height: 23px;
  font-size: 12px;
  float: right;
}
.biaozhuimg{
  width: 40px;
  height: 40px;
  position: absolute;
  top: 10px;
  right: 10px;
}
#emailID{
  position: relative;
}
.mainContent{
  height: 46vh;
  overflow-y: auto;
}
.headerBox{
  min-height: 70px;
  background: rgb(243, 243, 243);
  border-radius: 5px;
  padding: 10px 20px;
}
.emailBox{
  height: 70vh;
  padding: 15px;
}
.block{
    text-align: center;
    margin-top: 10px;
}
.title {
  width: 100%;
  height: 50px;
  background: #2b2f3a;
  /* margin-bottom: 20px; */
  font-size: 0.1rem;
  line-height: 50px;
  padding-left: 20px;
  color: #fff;
}
.line {
  width: 8px;
  height: 100%;
}
.mainContentBox {
  /* padding: 0 10px; */
  height: 90%;
}
.elTableClass{
  height: 750px;
}

/* 当屏幕宽度大于2560时 */
@media screen and (min-width: 2360px) {
  .elTableClass{
  height: 76vh;
}
}
</style>
